<template>
  <div class="app-container">
    <Form
      :model="formState"
      autocomplete="off"
      :label-col="labelCol"
      :rules="rules"
      @finish="onSubmit"
    >
      <FormItem label="用户名" name="username">
        <Input v-model:value="formState.username" allow-clear placeholder="用户名" />
      </FormItem>
      <FormItem label="昵称" name="nickname">
        <Input v-model:value="formState.nickname" allow-clear placeholder="不填同用户名" />
      </FormItem>
      <FormItem label="邮箱" name="email">
        <Input v-model:value="formState.email" allow-clear placeholder="邮箱" />
      </FormItem>

      <FormItem>
        <a-button type="primary" html-type="submit" :loading="btnLoading">提交</a-button>
      </FormItem>
    </Form>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { Form, FormItem, Input } from 'ant-design-vue'
  import type { Rule } from 'ant-design-vue/es/form'
  import { add } from '/@/api/sys/user'

  const emit = defineEmits(['onSuccess'])

  const labelCol = { style: { width: '80px' } }

  const rules: Record<string, Rule[]> = {
    username: [{ required: true, trigger: 'change', message: '名称不能为空' }],
  }

  const formState = ref({
    username: '',
    nickname: '',
    email: '',
  })

  const btnLoading = ref(false)

  const onSubmit = () => {
    btnLoading.value = true
    add(formState.value)
      .then(() => {
        btnLoading.value = false
        emit('onSuccess')
      })
      .catch(() => (btnLoading.value = false))
  }
</script>
